import {FC} from "react";
import SwitchDark from "@/components/SwitchDark";
import LoginForm from "@/views/login/components/LoginForm.tsx";
import loginIllustration from "@/assets/images/login_illustration.svg";
import logo from "@/assets/images/logo.svg";

const Login: FC = () => {

    return (
        <div
            className="flex justify-center items-center h-full min-h-[570px] bg-[var(--rc-colorBgLoginContainer)] bg-[url('@/assets/images/login_bg.svg')] bg-cover">
            <div
                className="relative flex items-center justify-around w-[96.5%] h-[94%] px-[20px] bg-[var(--rc-colorBgLoginMain)] rounded-[10px]">
                <SwitchDark iconSize={30}/>
                <div className="w-[750px] mr-[20px] ml-[-35px] lt-xl:hidden">
                    <img src={loginIllustration} style={{width: '100%', height: '100%'}} alt="illustration"/>
                </div>
                <div
                    className="lt-sm:w-full py-[60px] px-[80px] bg-[var(--rc-colorBgContainer)] rounded-[10px] shadow-[0_2px_10px_2px_rgb(0,0,0,.1)]">
                    <div className="flex items-center justify-center mb-[40px]">
                        <img src={logo} className="lt-xl:w-[54px] lt-xl:h-[50px]) w-[73px] h-[73px]" alt="logo"/>
                        <span
                            className="ml-[24px] lt-xl:text-[20px] text-[42px] font-bold color-[var(--rc-colorLogoText)] whitespace-nowrap">{import.meta.env.VITE_APP_TITLE || 'React-Admin-Template'}</span>
                    </div>
                    <LoginForm/>
                </div>
            </div>
        </div>
    );
};

export default Login;
